<!DOCTYPE html><html>
<head>
<title>Test Exploding crates animation</title>
<meta name = "viewport" content = "user-scalable=no, width=device-width">

</head>
<body>

<p>
Sprite.js, exploding crates <a href="https://github.com/batiste/sprite.js">Github project page</a><br>
<span id="result"></span> <br><a href="?canvas=1" id="canvas-mode">Use canvas backend.</a> <a href="?html=1" id="html-mode">Use HTML backend</a>

</p>

</body>
<script src="../sprite.js"></script>
<script>

window.onload = function() {

if(window.location.href.indexOf('canvas') != -1) {
    document.getElementById('canvas-mode').style.display = 'none';
} else {
    document.getElementById('html-mode').style.display = 'none';
}
var result = document.getElementById('result');

var scene = sjs.Scene({w:600, h:600});

scene.loadImages(['img/crate.png'], function() {

    function hasCollision(crate) {
        if(crate.y + crate.h > 600 - 32)
            return true;
        return false;
    }

    var bg = scene.Sprite();
    bg.position(0, 600-32);
    bg.size(600, 20);
    bg.setColor('#999');
    bg.update();

    var gravity = 0.5;

    //var parts = crate.explode();
    var crates = sjs.SpriteList();
    var parts = sjs.SpriteList();

    function paint() {

        bg.update();

        if(ticker.currentTick % 6 == 0) {
            var crate = scene.Sprite('img/crate.png');
            crate.position(50 + Math.random() * 500 | 0, 50)
            crates.add(crate);
        }

        var crate;
        while(crate = crates.iterate()) {
            crate.yv += gravity;
            crate.applyVelocity();
            if(hasCollision(crate)) {
                crate.reverseYVelocity();
                crate.yv = 0;
                if(Math.random() > 0.5) {
                    var x = 4 + Math.random() * 24 | 0;
                    var y = 4 + Math.random() * 24 | 0;
                    var _parts = crate.explode4(x, y);
                } else {
                    var horizontal = Math.random() > 0.5;
                    var position = 4 + Math.random() * 24 | 0;
                    var _parts = crate.explode2(position, horizontal);
                }
                for(var j=0; j<_parts.length; j++) {
                    var p = _parts[j];
                    p.xv = 5 * (Math.random() - 0.5)
                    p.yv = -6 -5 * Math.random();
                    p.rv = Math.random() / 2;
                    p.applyVelocity();
                }
                parts.add(_parts);
                crate.remove();
                crates.remove(crate);
            } else {
                crate.update();
            }
        }

        var part;
        while(part = parts.iterate()) {
            part.yv += gravity;
            part.applyVelocity();
            if(hasCollision(part)) {
                parts.remove(part);
                part.remove();
            } else {
                part.update();
            }
        }
    };


    var ticker = scene.Ticker(30, paint);
    ticker.run();

});

};
</script>

</html>
